<template>
  <div class="autocomplete-tree">
    <el-autocomplete
      popper-class="my-autocomplete"
      size="mini"
      v-model="check_value"
      :fetch-suggestions="querySearch"
      readonly
    >
      <template>
        <el-tree
          :data="treedata"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </template>
    </el-autocomplete>
  </div>
</template>

<script>
const treedata = [
  {
    label: "一级 1",
    children: [
      {
        label: "二级 1-1",
        children: [
          {
            label: "三级 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "一级 2",
    children: [
      {
        label: "二级 2-1",
        children: [
          {
            label: "三级 2-1-1",
          },
        ],
      },
      {
        label: "二级 2-2",
        children: [
          {
            label: "三级 2-2-1111111111111",
          },
        ],
      },
    ],
  },
  {
    label: "一级 3",
    children: [
      {
        label: "二级 3-1",
        children: [
          {
            label: "三级 3-1-1",
          },
        ],
      },
      {
        label: "二级 3-2",
        children: [
          {
            label: "三级 3-2-1",
          },
        ],
      },
    ],
  },
];
export default {
  name: "AutocompleteTree",
  data() {
    return {
      restaurants: [],
      check_value: "",
      state: "",
      treedata,
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      this.check_value = data.label;
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb([{ value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" }]);
    }
  },
};
</script>

<style lang="less" scoped>
.autocomplete-tree {
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
}
</style>
